<!DOCTYPE html>
<!-- 声明文档类型为 HTML5，告知浏览器以 HTML5 标准解析页面 -->

<!-- <html> 标签是 HTML 文档的根元素，包裹整个 HTML 页面内容 -->
<!-- lang 属性指定页面使用的语言，"en" 表示英语 -->
<html lang="en">
<head>
    <!-- <head> 标签包含了文档的元数据，如字符编码、页面标题等，这些信息不会直接显示在页面上 -->
    
    <!-- <meta> 标签用于提供 HTML 文档的元信息 -->
    <!-- charset 属性指定页面的字符编码为 UTF-8，支持多种语言字符的显示 -->
    <meta charset="UTF-8">
    
    <!-- name="viewport" 用于设置页面在移动设备上的视口属性 -->
    <!-- content="width=device-width, initial-scale=1.0" 表示页面宽度等于设备屏幕宽度，初始缩放比例为 1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- <title> 标签定义页面在浏览器标签页上显示的标题 -->
    <title>Document</title>
</head>
<body>
    <!-- <body> 标签包含了页面中所有可见的内容，如文本、图片、链接等 -->
    
    <!-- <h1> 标签定义一级标题，通常用于页面的主标题 -->
    <!-- 英文全称 "Heading 1"，在页面中具有最高的标题级别 -->
    <h1>这是一个练习</h1>
    
    <!-- <h2> 标签定义二级标题，标题级别仅次于 <h1> -->
    <!-- 英文全称 "Heading 2" -->
    <h2>现在开始吧！</h2>
    
    <!-- <p> 标签用于定义一个段落 -->
    <!-- 英文全称 "Paragraph" -->
    <p>你好，html!</p>
    
    <!-- <i> 标签用于将文本显示为斜体样式 -->
    <!-- 英文全称 "Italic" -->
    <i>斜体</i>
    
    <!-- <br> 标签用于在文本中插入一个换行符 -->
    <!-- 英文全称 "Break" -->
    <br>
    
    <!-- <b> 标签用于将文本显示为粗体样式 -->
    <!-- 英文全称 "Bold" -->
    <b>加粗</b>
    <br>
    
    <!-- <u> 标签用于为文本添加下划线 -->
    <!-- 英文全称 "Underline" -->
    <u>下划线</u>
    
    <!-- 注释内容，说明 <strong> 和 <em> 标签是语义化的加粗和斜体标签 -->
    <!-- <strong> 和 <em> 相比 <b> 和 <i> 更具语义，用于强调内容 -->
    <strong>强调加粗</strong>
    <em>强调斜体</em>
    <br>
    
    <!-- <small> 标签用于显示小号字体，通常用于次要信息，如版权声明 -->
    <!-- 英文全称 "Small" -->
    <small>© 2025 版权所有</small>
    <br>
    
    <!-- <del> 标签用于表示已删除的文本，通常会显示为带有删除线的样式 -->
    <!-- 英文全称 "Delete" -->
    <del>旧价格：100 元</del>
    <br>
    
    <!-- <ins> 标签用于表示新插入的文本，通常会显示为带有下划线的样式 -->
    <!-- 英文全称 "Insert" -->
    <ins>新价格：80 元</ins>
    
    <!-- 无序列表 <ul>：用项目符号展示列表项 -->
    <!-- 英文全称 "Unordered List" -->
    <ul>
        <!-- <li> 标签用于定义列表项，可用于有序列表和无序列表中 -->
        <!-- 英文全称 "List Item" -->
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>
    
    <!-- 有序列表 <ol>：用数字或字母展示列表项 -->
    <!-- 英文全称 "Ordered List" -->
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
    
    <!-- 定义列表 <dl>：用于展示术语及其定义 -->
    <!-- 英文全称 "Definition List" -->
        <dl>
            <!-- <dt> 标签用于定义定义列表中的术语 -->
            <!-- 英文全称 "Definition Term" -->
            <dt>HTML</dt>
            <!-- <dd> 标签用于定义定义列表中术语对应的定义 -->
            <!-- 英文全称 "Definition Description" -->
            <dd>超文本标记语言</dd>
            <dt>CSS</dt>
            <dd>层叠样式表</dd>
        </dl>
        
        <!-- 链接 <a>：创建超链接 -->
        <!-- 英文全称 "Anchor" -->
        <!-- href 属性指定链接的目标地址，用户点击链接时会跳转到该地址 -->
        <a href="https://gitee.com/test__226399/cpp-basic-practice/blob/master/StrVec/StrVec.h">我的gitee</a>
        <br>
        
        <!-- 图片 <img>：嵌入图片 -->
        <!-- 英文全称 "Image" -->
        <!-- src 属性指定图片文件的路径，浏览器会根据该路径加载图片 -->
        <!-- alt 属性提供图片的替代文本，当图片无法加载时会显示该文本，同时也有助于搜索引擎优化 -->
        <!-- height 和 width 属性分别指定图片的高度和宽度，单位为像素 -->
        <img src="src\img.png" alt="图片无法加载" height="200" width="200">
        <br>
        
        <!-- <table>、<tr>、<th> 和 <td>：用于创建表格 -->
        <!-- <table> 标签定义一个表格 -->
        <!-- 英文全称 "Table" -->
        <!-- border 属性为表格添加边框，值为 1 表示边框宽度为 1 像素 -->
        <table border="1">
            <!-- <tr> 标签定义表格中的一行 -->
            <!-- 英文全称 "Table Row" -->
            <tr>
                <!-- <th> 标签定义表格中的表头单元格，通常显示为粗体 -->
                <!-- 英文全称 "Table Head" -->
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr>
                <!-- <td> 标签定义表格中的普通数据单元格 -->
                <!-- 英文全称 "Table Data" -->
                <td>张三</td>
                <td>25</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
            </tr>
        </table>   
        
        <!-- 表单 <form>：用于收集用户输入 -->
        <!-- 英文全称 "Form" -->
        <!-- action 属性指定表单提交数据的目标地址，表单数据会被发送到该地址进行处理 -->
        <!-- method 属性指定表单提交数据的 HTTP 请求方法，"post" 表示以 POST 方式提交数据 -->
           <form action="submit.php" method="post">
                <!-- <label> 标签用于为表单元素定义标注，提高表单的可用性 -->
                <!-- 英文全称 "Label" -->
                <!-- for 属性用于绑定对应的表单元素，其值要与对应表单元素的 id 属性值一致 -->
                <label for="username">用户名:</label>
                <!-- <input> 标签用于创建各种类型的输入字段 -->
                <!-- 英文全称 "Input" -->
                <!-- type 属性指定输入字段的类型，"text" 表示文本输入框 -->
                <!-- id 属性为输入字段定义一个唯一标识符，方便 JavaScript 操作和与 <label> 标签绑定 -->
                <!-- name 属性用于在表单提交时标识该输入字段的数据名称 -->
                <input type="text" id="username" name="username"><br>
                <label for="password">密码:</label>
                <!-- type 属性为 "password" 表示密码输入框，输入内容会以掩码形式显示 -->
                <input type="password" id="password" name="password"><br>
                <!-- type 属性为 "submit" 表示提交按钮，点击后会提交表单数据 -->
                <!-- value 属性定义按钮上显示的文本内容 -->
                <input type="submit" value="提交">
            </form>
        
        <!-- <div> 和 <span>：用于布局和样式设置。<div> 是块级元素，<span> 是行内元素 -->
        <!-- <div> 标签是一个块级元素，常用于对页面进行布局和样式设置 -->
        <!-- 英文全称 "Division" -->
        <!-- style 属性用于为元素添加内联 CSS 样式，"background-color: lightblue;" 表示设置背景颜色为浅蓝色 -->
         <div style="background-color: lightblue;">
            <p>这是一个div块</p>
         </div>   
         <!-- <p> 标签用于定义一个段落 -->
         <p>
            这是 
            <!-- <span> 标签是一个行内元素，常用于为文本或其他行内元素设置样式 -->
            <!-- 英文全称 "Span" -->
            <!-- style 属性用于为元素添加内联 CSS 样式，"color: red;" 表示设置文本颜色为红色 -->
            <span style="color: red;">红色</span> 的文本。
        </p>
        
        <!-- <video> 和 <audio>：用于嵌入视频和音频 -->
        <!-- <video> 标签用于在网页中嵌入视频内容 -->
        <!-- 英文全称 "Video" -->
        <!-- width 和 height 属性分别指定视频播放器的宽度和高度，单位为像素 -->
        <!-- controls 属性为视频播放器添加播放、暂停、音量等控制控件 -->
        <!-- autoplay 属性表示视频在页面加载完成后自动播放 -->
        <!-- muted 属性表示视频以静音状态播放 -->
        <video width="320" height="240" controls  autoplay  muted>
            <!-- <source> 标签用于为 <video> 或 <audio> 元素指定媒体资源 -->
            <!-- 英文全称 "Source" -->
            <!-- src 属性指定媒体文件的路径 -->
            <source src="src\nature.mp4">
            <!-- 如果浏览器不支持 <video> 标签或不支持指定的视频格式，会显示该提示文本 -->
            您的浏览器不支持视频标签。
        </video>
        <br>
        <!-- <audio> 标签用于在网页中嵌入音频内容 -->
        <!-- 英文全称 "Audio" -->
        <!-- controls 属性为音频播放器添加播放、暂停、音量等控制控件 -->
        <audio controls>
            <!-- src 属性指定音频文件的路径 -->
            <!-- type 属性指定音频文件的 MIME 类型，帮助浏览器判断是否支持该格式 -->
            <source src="src\audio.mp3" type="audio/mpeg">
            <!-- 如果浏览器不支持 <audio> 标签或不支持指定的音频格式，会显示该提示文本 -->
            您的浏览器不支持音频标签。
        </audio>
        
</body> 
</html>